<template>
  <div>
    <highcharts :options="chartOptions2"></highcharts>
  </div>
</template>

<script>
import { Chart } from 'highcharts-vue'
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'

exportingInit(Highcharts)

export default {
  name: 'Charts2',
  components: {
    highcharts: Chart
  },
  data() {
    return {
      chartData: [],
      chartOptions2: {
        chart: {
          type: 'spline'
        },
        title: {
          text: '癫痫发作时间定位'
        },
        subtitle: {
          text: ''
        },
        xAxis: {
          type: 'datetime',
          labels: {
            overflow: 'justify'
          }
        },
        yAxis: {
          title: {
            text: '癫痫病变状态'
          },
          min: 0,
          minorGridLineWidth: 0,
          gridLineWidth: 0,
          alternateGridColor: null,
          plotBands: [{ // Light air
            from: 0.3,
            to: 1.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
              text: '正常',
              style: {
                color: '#606060'
              }
            }
          }, { // Light breeze
            from: 1.5,
            to: 3.3,
            color: 'rgba(0, 0, 0, 0)',
            label: {
              text: '非静息状态',
              style: {
                color: '#0000CD'
              }
            }
          }, { // Gentle breeze
            from: 3.3,
            to: 5.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
              text: '部分性发作',
              style: {
                color: '#DB7093'
              }
            }
          },
          //   { // Moderate breeze
          //   from: 5.5,
          //   to: 8,
          //   color: 'rgba(0, 0, 0, 0)',
          //   label: {
          //     text: '温和风',
          //     style: {
          //       color: '#606060'
          //     }
          //   }
          // },
            { // Fresh breeze
            from: 8,
            to: 11,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
              text: '失神性发作',
              style: {
                color: '#C71585'
              }
            }
          },
          //   { // Strong breeze
          //   from: 11,
          //   to: 14,
          //   color: 'rgba(0, 0, 0, 0)',
          //   label: {
          //     text: '强风',
          //     style: {
          //       color: '#606060'
          //     }
          //   }
          // },
            { // High wind
            from: 14,
            to: 15,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
              text: '强直阵挛发作',
              style: {
                color: '#DC143C'
              }
            }
          }]
        },
        plotOptions: {
          spline: {
            lineWidth: 4,
            states: {
              hover: {
                lineWidth: 5
              }
            },
            marker: {
              enabled: false
            },
            pointInterval: 720000, // one hour
            pointStart: Date.UTC(2009, 9, 6, 13, 0, 0)
          }
        },
        series: [{
          name: 'Voll',
          data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 1, 0.0,
            0.0, 14, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
            0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
            3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4,
            0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1, 0.0, 0.3, 0.0,
            0.0, 0.4, 0.0, 0.1, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0,
            0.0, 0.6, 1.2, 1.7, 0.7, 2.9, 4.1, 2.6, 3.7, 3.9, 1.7, 2.3,
            3.0, 3.3, 4.8, 5.0, 4.8, 5.0, 3.2, 2.0, 0.9, 0.4, 0.3, 0.5, 0.4]
        }]
      }
    }
  },
  methods: {
    getData() {

    },
    initData() {
      this.chartData = this.getData()
    }
  },
  activated() {
    this.initData()
  }
}
</script>

<style scoped>

</style>
